/* 工具栏，命名来源于类似excel头部的工具栏 */
import React, { useCallback } from 'react';
import classnames from 'classnames';
import prefix from '../lib/clsname';
import Icon from './Icon';
import useSplitIcons from './hooks/useSplitIcons';
import basicIcons from './lib/basicIcons';
const clsName = `${prefix.name}-toolbar`;
const closeIcon = {
    name: 'close',
    iconCls: 'fm fm-cross',
    direction: 'right',
}
function ToolBar(props) {
    const { toolFns, activedFile, defineTools, closeAble, onClose, theme } = props;
    let { leftIcons, rightIcons } = useSplitIcons(basicIcons, activedFile, toolFns, defineTools);
    const mainClsName = classnames(clsName, {
        'theme-light': theme === 'light',
        'theme-dark': theme === 'dark',
    })
    const handleClose = useCallback(() => {
        typeof onClose === 'function' && onClose();
    }, []);
    return (
        <div className={mainClsName}>
            <div className={`${clsName}_icon-panel`}>
                {leftIcons.length > 0 ? <div className={`${clsName}_left`}>
                    {leftIcons.map(icon => {
                        return <Icon key={icon.name} icon={icon} invoice={activedFile} label={icon.label} />;
                    })}
                </div> : null}
                {rightIcons.length > 0 ? <div className={`${clsName}_right`}>
                    {rightIcons.map(icon => {
                        return <Icon key={icon.name} icon={icon} invoice={activedFile} label={icon.label} />;
                    })}
                </div> : null}
            </div>
            {closeAble ? <div className={`${clsName}_close`}><Icon icon={{ ...closeIcon, onClick: handleClose }} label={closeIcon.label} /></div> : null}
        </div>
    )
}
export default ToolBar;